import React from 'react'
import styles from './Header.module.css'
import logo from '../../assets/logo.svg'
import { GlobalOutlined } from '@ant-design/icons'
import { Layout, Typography, Input, Menu, Button, Dropdown } from 'antd';
import { menuList } from './setting';
import {useHistory} from 'react-router-dom';
// useLocation, useParams, useRouteMatch  
export  const Header:React.FC = () => {
  const history = useHistory()
  return (
    <div className={styles["app-header"]}>
      <div className={styles["top-header"]}>
        <div className={styles.inner}>
          <Typography.Text>让旅游更幸福</Typography.Text>
          <Dropdown.Button style={{marginLeft: 15}} overlay = {
            <Menu>
              <Menu.Item>中文</Menu.Item>
              <Menu.Item>English</Menu.Item>
            </Menu>
          }
          icon={<GlobalOutlined/>}
          >
            语言
          </Dropdown.Button>
          <Button.Group className={styles["button-group"]}>
            <Button onClick={() => history.push('signIn')}>登陆</Button>
            <Button onClick={() => history.push('register')}>注册</Button>
          </Button.Group>
        </div>
      </div>

      <Layout.Header className={styles["main-header"]}>
        <img src={logo} alt="" className={styles["App-logo"]}/>
        <Typography.Title level={3} className={styles.title}>React 旅游网</Typography.Title>
        <Input.Search placeholder="请输入旅游目的地、主题、或关键字" className={styles["search-input"]}/>
      </Layout.Header>
      <Menu mode={"horizontal"} className={styles["main-menu"]}>
        {
          menuList.map(item => {
            return  <Menu.Item key={item.key}>{item.name}</Menu.Item>
          })
        }
      </Menu>
    </div>
  )
}
